<template>
   <div>
       <el-dialog 
            title="创建用户"
            :visible='visible' width="400px" >
            <el-form :model="form">
                <el-form-item label="用户名" label-width="60px">
                    <el-input v-model="form.username" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="密码" label-width="60px">
                    <el-input v-model="form.password" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="手机号" label-width="60px">
                    <el-input v-model="form.phone" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="邮箱" label-width="60px">
                    <el-input v-model="form.email" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="角色" label-width="60px">
                    <el-select v-model="form.role" placeholder="">
                      <el-option v-for="i in role_list" :key="i.id" :label="i.name" :value="i.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div  slot="footer" class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="add">确认</el-button>
            </div>
            </el-dialog>

   </div>
     
</template>

<script>
import axios from 'axios'
export default {
    props:['visible'],
    data() {
        return {
         form:{},
         role_list:[{'id':'1','name':'管理员'},{'id':'2','name':'普通用户'}]
        }
    },
    methods: {
         add(){
             alert('添加')
             this.$emit('update:visible',false)
         },
         cancel(){
             //隐藏
             this.$emit('update:visible',false)
         }
    },
    created() {

    }
}
</script>

<style scoped>

</style>
